<template>
  <div class="demand">
    <el-breadcrumb separator="/" style="margin-bottom: 10px">
      <el-breadcrumb-item
        ><el-icon><House /></el-icon
      ></el-breadcrumb-item>
      <el-breadcrumb-item>岗位要求</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <div class="left-box">
        <div
          class="left-title"
          style="display: flex; justify-content: space-between"
        >
          <div style="padding: 10px 10px; display: flex">
            <div style="padding-top: 2px; margin-right: 5px">
              <el-icon><Menu /></el-icon>
            </div>
            <div style="font-weight: 550">岗位类型</div>
          </div>
          <!-- <div>
            <el-button
              style="font-size: 23px"
              type="primary"
              link
              :icon="Edit"
            />
          </div> -->
        </div>
        <div>
          <el-tree
            style="width: 100%; padding: 20px 0"
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
          >
            <template #default="{ node }">
              <span class="tree-text" v-if="node.label.length <= 15">
                {{ node.label }}</span
              >
              <el-tooltip
                v-else
                effect="dark"
                :content="node.label"
                placement="top"
              >
                <span class="tree-text"> {{ node.label }}</span>
              </el-tooltip>
            </template>
          </el-tree>
        </div>
      </div>
      <div class="right-box">
        <div class="right-title">
          <div style="display: flex">
            <div style="line-height: 28px; margin-right: 5px; font-weight: 550">
              名称:
            </div>
            <div style="margin-left: 20px">
              <el-input
                v-model="queryParams.name"
                style="width: 210px"
                placeholder="请输入名称"
              ></el-input>
            </div>
          </div>
          <div style="margin-left: 80px">
            <el-button type="primary" :icon="Search" @click="getTableData()"
              >搜索</el-button
            >
            <el-button @click="reset()" :icon="RefreshRight">重置</el-button>
          </div>
        </div>
        <div class="right-content">
          <div
            style="
              display: flex;
              border-bottom: 1.5px solid rgb(189, 191, 190);
              width: 100%;
              padding-bottom: 10px;
            "
          >
            <el-button type="primary" @click="addData()" :icon="Plus"
              >新增</el-button
            >
            <el-button type="danger" @click="batchDelete()" :icon="DeleteFilled"
              >删除</el-button
            >
            <el-button type="success" @click="enter()" :icon="Download"
              >导入</el-button
            >
            <!-- <el-button type="warning" :icon="Upload">导出</el-button> -->
          </div>
          <div style="padding: 20px 0">
            <el-table
              class="no-vertical-border"
              :data="tableData"
              style="width: 100%; margin-bottom: 20px"
              height="350px"
              row-key="id"
              border
              default-expand-all
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column label="序号" type="index" width="80" />
              <el-table-column prop="name" label="名称" />
              <el-table-column prop="jobCount" label="岗位数量" />
              <el-table-column prop="createTime" label="创建时间" />
              <el-table-column label="操作">
                <template #default="scope">
                  <div style="display: flex">
                    <el-button type="primary" link @click="editData(scope.row)">
                      编辑
                    </el-button>
                    <div style="margin: 0 10px; color: rgb(218, 218, 218)">
                      |
                    </div>
                    <el-popconfirm
                      title="你确定要删除这条岗位要求吗?"
                      @confirm="confirmEvent(scope.row)"
                      @cancel="cancelEvent"
                    >
                      <template #reference>
                        <el-button type="primary" link> 删除 </el-button>
                      </template>
                    </el-popconfirm>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                background
                v-show="total > 0"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                v-model:page="queryParams.pageIndex"
                v-model:limit="queryParams.pageSize"
                class="pagination_bom"
              />
              <!-- @pagination="getList"   -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增或者修改弹窗 -->
    <el-dialog center v-model="addDialog" :title="addTitle" width="600">
      <el-form :model="form" label-width="120px">
        <el-form-item label="岗位要求名称 :">
          <el-input
            v-model="form.name"
            placeholder="请输入岗位要求名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="岗位数量 :">
          <el-input
            v-model="form.jobCount"
            placeholder="请输入岗位数量"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-foot">
        <el-button
          v-if="addTitle == '添加岗位要求'"
          @click="verifyAddData()"
          type="primary"
          class="foot-button"
          :disabled="clicked"
          >确认</el-button
        >
        <el-button
          v-else
          @click="verifyEditData()"
          type="primary"
          class="foot-button"
          :disabled="editClicked"
          >确认</el-button
        >
        <el-button
          @click="addDialog = false"
          type="primary"
          class="foot-button"
          plain
          >取消</el-button
        >
      </div>
    </el-dialog>
    <!-- 导入弹框 -->
    <el-dialog
      @close="closeDialog()"
      center
      v-model="enterDialog"
      title="导入文件"
      width="800"
    >
      <div style="display: flex; width: 100%; border: 1px solid #e9e9e9">
        <div style="background: #f5f5f5; padding: 20px 15px">
          <img
            style="width: 80px"
            src="../../assets/enter/download.png"
            alt=""
          />
        </div>
        <div style="border-left: 1px solid #e9e9e9; padding: 20px">
          <div style="font-size: 18px; margin-bottom: 5px">
            填写导入岗位要求
          </div>
          <div style="font-size: 14px; margin-bottom: 10px">
            请按照数据模板的格式准备导入数据
          </div>
          <div>
            <el-button type="primary"
              ><a href="http://8.137.179.57:9000/yib/岗位要求导入.xlsx"
                >下载模板</a
              ></el-button
            >
          </div>
        </div>
      </div>
      <div style="height: 40px"></div>
      <div style="display: flex; width: 100%; border: 1px solid #e9e9e9">
        <div style="background: #f5f5f5; padding: 30px 15px 15px 15px">
          <img
            style="width: 80px"
            src="../../assets/enter/uploading.png"
            alt=""
          />
        </div>
        <div style="border-left: 1px solid #e9e9e9; padding: 20px">
          <div style="font-size: 18px; margin-bottom: 5px">上传岗位要求表</div>
          <div style="font-size: 14px; margin-bottom: 10px">
            文件后缀名必须喂xls或xlsx(即Excel),文件大小不得大于10M
          </div>
          <div>
            <el-upload
              class="upload-demo"
              :action="action"
              :on-change="handleChange"
              :file-list="fileList"
              :headers="myHeaders"
            >
              <div>
                <el-button type="primary">上传文件</el-button>
              </div>
            </el-upload>
          </div>
        </div>
      </div>
      <div class="dialog-foot">
        <el-button @click="closeDialog()" type="primary" class="foot-button"
          >完成</el-button
        >
        <el-button
          @click="closeDialog()"
          type="primary"
          class="foot-button"
          plain
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="Demand">
import {
  House,
  Menu,
  Edit,
  Search,
  RefreshRight,
  Plus,
  DeleteFilled,
  Download,
  Upload,
} from "@element-plus/icons-vue";
import { computed, onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import {
  getTable,
  getTree,
  verifyAdd,
  edit,
  verifyEdit,
  deleteTable,
  deleteTableAll,
} from "@/api/demand";
import { baseApi, devApi } from "../../../base_path.json";

const defaultProps = reactive({
  children: "child",
  label: "name",
});
const myHeaders = ref({
  Token: localStorage.getItem("Token"),
});
const treeData = ref([]);

const action = ref(baseApi + "/excel/importRequirement");

const fileList = ref();

const clicked = ref(false); // 确认按钮防抖参数
const editClicked = ref(false); // 编辑确认按钮防抖参数

const total = ref(1);
const form = ref({
  token: localStorage.getItem("Token"),
  name: "",
  jobCount: "",
  majorId: "",
  parentId: "",
});

const queryParams = ref({
  token: localStorage.getItem("Token"),
  majorId: "",
  name: "",
  pageIndex: 1,
  pageSize: 10,
});

const tableData = ref([]);
const ids = ref([]);

const addDialog = ref(false);
const addTitle = ref("");

const enterDialog = ref(false);

// 关闭时导入弹窗回调
function closeDialog() {
  fileList.value = "";
  enterDialog.value = false;
}

function handleChange() {}

// 获取专业树数据
async function getTreeList() {
  const token = localStorage.getItem("Token");
  const res = await getTree({
    token,
  });
  treeData.value = res;
  queryParams.value.majorId = res[0].id;
}
// 专业点击
function handleNodeClick(data) {
  queryParams.value.majorId = data.id;
  form.value.majorId = data.id;
  getTableData();
}

// 获取表格数据
async function getTableData() {
  const res = await getTable(queryParams.value);
  total.value = res.count;
  tableData.value = res.data;
}

// 表格选取
function handleSelectionChange(val) {
  if (val.length == 0) {
    form.value.parentId = 0;
  } else {
    form.value.parentId = val[0].id;
  }
  ids.value = val.map((item) => item.id);
}

// 重置按钮
function reset() {
  queryParams.value.name = "";
}

// 新增按钮
function addData() {
  addTitle.value = "添加岗位要求";
  form.value.name = "";
  form.value.jobCount = "";
  if (!form.value.majorId) {
    ElMessage({
      message: "请选择专业分类",
      type: "warning",
    });
    addDialog.value = false;
    return;
  }
  if (!form.value.parentId) {
    form.value.parentId = 0;
  }
  addDialog.value = true;
}

// 新增确认按钮
async function verifyAddData() {
  if (clicked.value) return;
  clicked.value = true;
  setTimeout(() => {
    clicked.value = false;
  }, 3000);

  const res = await verifyAdd(form.value);
  if (res.code == 0) {
    ElMessage({
      message: "新建成功",
      type: "success",
    });
    getTableData();
    addDialog.value = false;
  }
}

// 导入按钮操作
function enter() {
  enterDialog.value = true;
}

// 表格内编辑按钮
async function editData(row) {
  addTitle.value = "修改岗位要求";
  addDialog.value = true;
  const res = await edit(row.id);
  form.value = res;
}

// 编辑弹窗确认按钮
async function verifyEditData() {
  if (editClicked.value) return;
  editClicked.value = true;
  setTimeout(() => {
    editClicked.value = false;
  }, 3000);

  const res = await verifyEdit(form.value);
  if (res.code == 0) {
    ElMessage({
      message: "修改成功",
      type: "success",
    });
  }
  addDialog.value = false;
  getTableData();
}

// 表格内删除按钮
async function confirmEvent(row) {
  const res = await deleteTable(row.id);
  if (res.code == 0) {
    getTableData();
    ElMessage({
      message: "删除成功",
      type: "success",
    });
  }
}

function cancelEvent() {
  console.log("取消删除");
}

// 批量删除
async function batchDelete() {
  if (ids.value.length == 0) {
    ElMessage({
      message: "请选择删除的数据并勾选",
      type: "warning",
    });
  } else {
    const res = await deleteTableAll(ids.value);
    if (res.code == -1) {
      ElMessage({
        message: res.msg,
        type: "error",
      });
    }
    if (res.code == 0) {
      ElMessage({
        message: "批量删除成功",
        type: "success",
      });
    }
    getTableData();
  }
}
onMounted(async () => {
  await getTreeList();
  await getTableData();
});
</script>

<style lang="scss" scoped>
.demand {
  height: calc(100vh - 145px);
}

.content {
  background: #fff;
  height: 100%;
  display: flex;
  border-top: 1px solid rgb(189, 191, 190);
  border-right: 1px solid rgb(189, 191, 190);
}

.left-box {
  width: 230px;
  border-right: 1px solid rgb(189, 191, 190);
  border-left: 1px solid rgb(189, 191, 190);
  margin-right: 20px;

  .left-title {
    border-bottom: 1px solid rgb(189, 191, 190);
    width: 100%;
  }
}

.right-box {
  width: 100%;

  .right-title {
    display: flex;
    padding: 20px;
    width: 100%;
    border-left: 1px solid rgb(189, 191, 190);
    border-bottom: 1px solid rgb(189, 191, 190);
    margin-bottom: 20px;
  }

  .right-content {
    border-top: 1px solid rgb(189, 191, 190);
    border-left: 1px solid rgb(189, 191, 190);
    padding: 20px;
    // height: calc(100vh - 333px);
    width: 100%;
    height: calc(100% - 92px);
  }
}

.dialog-foot {
  width: 100%;
  text-align: center;
  padding: 20px 0;

  .foot-button {
    width: 120px;
    height: 35px;
  }
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}

a {
  color: #fff;
}

:deep(.el-tree-node__content) {
  height: 40px;
}
</style>
